<template>
  <div id="Userinfo">
      <slot name="all-header"></slot>
      <div class="path-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>客房管理</el-breadcrumb-item>
            <el-breadcrumb-item>客房信息</el-breadcrumb-item>
            </el-breadcrumb>
       </div>
   <el-container style="height:540px">
            <el-header style="text-align: left; font-size: 12px;padding-left:34px">
                <el-button type="primary" 
                icon="el-icon-plus" @click="addUser()">
                    增加
                </el-button>

                <el-input v-model="input" 
                 style="width:40%"
                placeholder="请输入内容">

                </el-input>
               <el-button type="primary" @click="searchUser()"
               icon="el-icon-search">搜索
               </el-button>
            </el-header>
            
            <el-main id="userlist">
               <el-table :data="tableData">
                    <el-table-column prop="userId" label="編號" >
                    </el-table-column>
                    <el-table-column prop="userName" label="類型" >
                    </el-table-column>
                    <el-table-column prop="passWord" label="狀態">
                    </el-table-column>
                     <el-table-column prop="passWord" label="樓層">
                    </el-table-column>
                    <el-table-column prop="passWord" label="標准價格">
                    </el-table-column>
                    <el-table-column prop="passWord" label="折後价">
                    </el-table-column>
                    <el-table-column prop="passWord" label="普通會員价">
                    </el-table-column>
                    <el-table-column prop="passWord" label="Vip會員价">
                    </el-table-column>
                           <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                    size="mini"
                                    @click="updateUser(scope.$index,scope.row)">编辑</el-button>
                                    <el-button
                                    size="mini"
                                    type="danger"
                                    @click="deleteUser(scope.$index,scope.row)">删除</el-button>
                                </template>
                        </el-table-column>
               </el-table>
            </el-main>
     </el-container>

     <!--分頁...........-->
        <div class="block">
           
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="9"
            layout="total,prev, pager, next, jumper"
            :total="pageCount">
            </el-pagination>
        </div>
  </div>
</template>

<script>
export default {
    name:'UserInfo',
    data() {
        return {
            //用戶列表...
            tableData:[],

            //輸入框的內容
            input:'',

            //當前頁
            currentPage:1,

            //數據個數
            pageCount:0,
        }
    },
    methods: {
        //---------------------------------------------------------------
       /**
        * 獲取所有用戶
        * 這里是一開始沒有參數的時候用的......................
        * ...............
        * this.handleCurrentChange(1);
        */
       //---------------------------------------------------------------
       getUsers(){
           this.handleCurrentChange(1);
       },
       //---------------------------------------------------------------
       /**
        * @description 搜索用戶...
        *              搜索有兩種情況....
        *         @param  有參 ---input!=''
        *         @param      沒參 ---input==''
        *         @path   /search?userName=this.input & page=0 & pageSize=9
        * 
        * 更改用戶...
        *           
        * 刪除用戶..
        *           
        */
       //---------------------------------------------------------------
       async searchUser(){
           let that=this
           if(that.input!='')
           {
                await this.$axios.get("http://localhost:8081/search?userName="+this.input+"&page="+(that.currentPage-1)*9+"&pageSize=9")
            .then((result) => {
               //that.currentPage=0;
               that.tableData=result.data;
               that.getPageCountHasInput();  
               })
           }
           else{
              //空則返回進入時的數據.....
              this.getUsers();
              this.getPageCount();
           }
           
       },


       /**
        * @description 增加用戶...
        * @path        /home/updateUser
        *           
        */
       //*-------------------------------------------------------------------
       addUser(){
           this.$router.push({path:'/homepage/updateRoomInfo',query:{do:'add'}});
           //this.pageCount++;
      },

        //*-------------------------------------------------------------------
       /**
        * @description 更改用戶
        * @path        /homepage/updateUser
        */
       //*-------------------------------------------------------------------
       updateUser(index,row){
           //console.log(index);
           //console.log(row.passWord);
           this.$router.push({path:'/homepage/updateUser',query:{do:'update',userId:(row.userId),userName:row.userName,passWord:row.passWord}});
       },

        //*-------------------------------------------------------------------
        /**
        * @description 更改用戶
        * @path        /deleteUser?userId=...
        */
        //*-------------------------------------------------------------------
       async deleteUser(index,row){
           let that=this;
           
           await this.$axios.get("http://localhost:8081/deleteUser?userId="+row.userId)
            .then((result) => {
                if(result.data=='deleted'){
                    that.handleCurrentChange(that.currentPage);
                   // that.getPageCount();
                    this.$message({
                        message: '刪除成功',
                        type: 'success',
                        duration:1000
                        });
                }
                
            }).catch((err) => {
              
            });
       },
        //---------------------------------------------------------------
       /**
        * @description 輸入增加用戶的參數
        * element-ui
        * ui 自帶的函數....
        */
       //---------------------------------------------------------------
        open() {
            this.$prompt('请输入邮箱', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(({ value }) => {
            this.$message({
                type: 'success',
                message: '你的邮箱是: ' + value
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消输入'
            });       
            });
        },
        //*-------------------------------------------------------------------
        /**
         * 頁面改變.....
         *     暫時兩種情況
         *     @param 'inserted' .......
         *     @param  'updated' ...........
         */
        //*-------------------------------------------------------------------
        pathChange(){
          //console.log(this.$route.query.status=='ok');
          if(this.$route.query.status=='inserted'){
              //console.log('in');
                this.$message({
                message: '增加成功',
                type: 'success',
                duration:1000
                });

          }
          else if(this.$route.query.status=='updated')
          {
              this.$message({
                message: '更改成功',
                type: 'success',
                duration:1000
                });
          }
          
        },


        //*-------------------------------------------------------------------
        /**
         * @description 頁數請求...
         * http://localhost:8081/queryLimit?page=1&pageSize=14
         */
        handleCurrentChange(val){
            let that =this;
            that.currentPage=val;
            if(that.input=='')
            {
                this.$axios.get("http://localhost:8081/queryLimit?page="+(val-1)*9+"&pageSize=9")
                .then((result) => {
                    console.log(result);
                    that.tableData=result.data;
                    that.pageCount--;
                })
            }
            else{


                //當input有值時......................
                 that.searchUser();
            }
        },
        //*-------------------------------------------------------------------
        /**
         * @description    請求數量..
         *          @mark  這個是沒有關鍵字的..
         */
        getPageCount(){
            let that =this;
            this.$axios.get("http://localhost:8081/pageCount")
            .then((result) => {
                that.pageCount=result.data;
            })
        },
         //*-------------------------------------------------------------------
        /**
         * @description   請求數量
         *          @mark 有關鍵字的...
         */
        getPageCountHasInput(){
            let that=this;
            this.$axios.get("http://localhost:8081/searchCount?userName="+that.input)
            .then((res)=>{
                console.log(res);
                that.pageCount=res.data;
            })
        }
    },
    mounted() {
        /**
         * @description 進入界面時先獲取所有數據...
         *              檢查有沒有路徑變化--有則是增加或刪除了...
         *              獲取頁數....
         */
        //this.getUsers();
        //this.pathChange();
        //this.getPageCount();
    },
    watch:{
        //當路徑變化...
        '$route': 'pathChange'
    }

}
</script>

<style>
    #Userinfo{
        width: 100%;
    }
 

</style>